<template>
	<view class="page-content">
		<!-- <view class="banner">
            产品图占位或其他内容
        </view> -->
		<luBarTabNav :isShowTabbar="isShowTabbar" :tabList="tabList" :barFixed="barFixed" :iconShow="iconShow"
		 :transitionShow="transitionShow" :barHeight="barHeight" :barTop="barTop" :barId="barId" ref="barTabNav">
			<!-- 项目 -->
			<view id="item1" class="tabbody">
				<view class="project-detail-project">
					<view style="background-color: #FFFFFF;">
						<image class="project-detail-project-img" :src="projectDetail.photos[0]"></image>
					</view>
					<view class="project-detail-project-contain">
						<view class="project-detail-project-title">
							{{projectDetail.projectName}}
						</view>
						<view class="project-detail-project-words">
							<view v-for="(item,index) in projectDetail.words" :key='index'>{{item}}</view>
						</view>
						<view class="project-detail-project-want">
							<!-- {{formatJoin(projectDetail.yourWant)}} -->
							<view style="flex:1;color:#333;font-size: 26rpx;display: flex;align-items: center;">
								<image style="width: 20upx;height: 25upx;margin-right:10upx;" :src="base_url+'/img/wx/gkxcx/p-loca.jpg'"
								 mode=""></image>{{projectDetail.provinceName+projectDetail.cityName}}
							</view>
						</view>
						<!-- two-line -->

					</view>


					<view class="project-appeal" v-if="isLine">
						<image class="project-appeal-right-sign" :src="base_url+'/img/wx/img1.png'"></image>
						<view class="appeal-title">
							<!-- <image :src="base_url+/img/wx/project-detail-icon-1.png"></image> -->
							<span>{{formatJoin(projectDetail.yourWant)}}</span>
						</view>
						<view class="appeal-desc">
							{{projectDetail.yourWantContent}}
						</view>
					</view>


					<view class="project-detail-project-contain">
						<view class="project-detail-project-condetail">
							<view class="project-detail-project-condetail-item-over " v-if="isLine">
								<text class="project-detail-project-condetail-item-title">项目估值：</text>
								<text class="project-detail-project-condetail-item-title-mon">{{projectDetail.valuationType === 1 ? '面议' : '￥' + projectDetail.valuation + '万元'}}</text>
							</view>
							<view class="project-detail-project-condetail-item-over ">
								<text class="project-detail-project-condetail-item-title">当前阶段：</text>
								<text class="project-detail-project-condetail-item-title-con">{{projectDetail.processTypeStr||''}} <text v-if='projectDetail.financingTypeStr'>({{projectDetail.financingTypeStr||''}})</text></text>
							</view>
							<view class="project-detail-project-condetail-item-over ">
								<text class="project-detail-project-condetail-item-title">成果类型：</text>
								<text class="project-detail-project-condetail-item-title-con">{{formatJoin(projectDetail.fruitTypeStr)}}</text>
							</view>
							<view class="project-detail-project-condetail-item-over ">
								<text class="project-detail-project-condetail-item-title">归属方性质：</text>
								<text class="project-detail-project-condetail-item-title-con">{{formatJoin(projectDetail.cooperateType)}}</text>
							</view>
							<view class="project-detail-project-condetail-item-over ">
								<text class="project-detail-project-condetail-item-title">技术领域：</text>
								<text class="project-detail-project-condetail-item-title-con">{{formatJoin(projectDetail.skillAreaStr)}}</text>
							</view>
							<view class="project-detail-project-condetail-item-over ">
								<text class="project-detail-project-condetail-item-title">应用领域：</text>
								<text class="project-detail-project-condetail-item-title-con">{{formatJoin(projectDetail.useAreaStr)}}</text>
							</view>
							<view class="project-detail-project-condetail-item-over ">
								<text class="project-detail-project-condetail-item-title ">项目方：</text>
								<text class="project-detail-project-condetail-item-title-con">{{projectDetail.companyName}}</text>
							</view>
							<view class="project-detail-project-condetail-item-over ">
								<text class="project-detail-project-condetail-item-title ">发布方：</text>
								<text class="project-detail-project-condetail-item-title-con">{{projectDetail.createName}}</text>
							</view>
						</view>
					</view>
					<view class="self-divider">

					</view>
					<!-- 	<view class="project-detail-project-condetail-belong">
						<view class="project-detail-project-condetail-belong-title">
							项目方
						</view>
						<view class="project-detail-project-condetail-belong-com">
							<image style="width: 30upx;height: 30upx;margin-right:11upx;vertical-align: middle;" :src="base_url+/img/wx/gkxcx/homecompany.jpg"
							 mode=""></image>
							<text style="vertical-align: middle;">{{projectDetail.companyName}}</text>
						</view>
						<view class="project-detail-project-condetail-belong-loc">
							<image style="width: 20upx;height: 25upx;margin-right:21upx;vertical-align: middle;" :src="base_url+/img/wx/gkxcx/p-loca.jpg"
							 mode=""></image>
							<text style="vertical-align: middle;">{{projectDetail.provinceName+projectDetail.cityName}}</text>
						</view>
					</view>
					<view class="self-divider">

					</view> -->
				</view>
			</view>
			<view id="item2" class="tabbody">
				<view class="project-detail-detail-contain">
					<view class="project-detail-detail-contain-title">
						详情介绍
					</view>
					<view class="project-detail-project-wantdesc-title">
						【摘要】
					</view>
					<view class="project-detail-project-wantdesc" style="margin:10upx 0 20upx;">
						{{projectDetail.summary}}
					</view>
					<view class="project-detail-detail-contain-detail">
						<view v-html="projectDetail.detail" class="">

						</view>
						<!-- <image style="width: 100%;object-fit: cover;" :src="constUrl+'/img/wx/project_detail_1.png'" mode="widthFix"></image> -->
					</view>
				</view>
				<view class="self-divider">

				</view>
			</view>
			<view id="item3" class="tabbody" v-if="isLine">
				<view class="project-detail-detail-contain">
					<view class="project-detail-detail-contain-title">
						评论 ({{commentData.total?commentData.total:'0'}})
					</view>
					<commentTpl ref='commentTpl' :list='commentData.list' :baseUrl='constUrl' :pid='id' :type="'project'" :isLastPage='commentData.isLastPage'
					 @commentOne='insertLevelOneComment' @commentTwo='insertLevelTwoComment' :hasLogin='hasLogin' @getMore='getComment'
					 @report='insertReport' @del='delectLevelTwoCommentById' @toThumb='increaseThumb'></commentTpl>
				</view>

			</view>
			<view id="item4" class="tabbody">
				<view class="project-detail-recommend">
					<!-- <view class="project-detail-recommend-head">
						<view class="project-detail-recommend-head-line right-margin43">

						</view>
						<view class="project-detail-recommend-head-title">
							相似项目
						</view>
						<view class="project-detail-recommend-head-line left-margin43">

						</view>
					</view> -->
					<view class="project-detail-recommend-head">
						<image :src="base_url+'/img/wx/gkxcx/pro_for_you.png'" mode="heightFix"></image>
					</view>

					<view class="project-detail-recommend-contain">
						<ProjectItem ref='ProjectItem' :projectList="searchRecommendProjectList"></ProjectItem>
					</view>
				</view>
			</view>
			<view class="sysBottomShow" style="background: #f5f6f9;">
				我是有底线的
			</view>
			<view :style="{'height':bottomHeight}">

			</view>
			<view class="project-detail-option" :style="{'height':bottomHeight}">
				<view class="project-detail-option-contain">
					<view @click="collectProject" class="project-detail-option-sc">
						<view class="project-detail-option-top">
							<image class="project-detail-option-top" :src="isCollect?'https://www.innovationgloble.com/wxs/img/wx/gkxcx/sc.jpg':'https://www.innovationgloble.com/wxs/img/wx/gkxcx/wsc.jpg'"
							 mode="heightFix"></image>
						</view>
						<view class="project-detail-option-text">
							{{isCollect?'已收藏':'收藏'}}
						</view>
					</view>
					<view class="project-detail-option-sc">
						<button open-type="share" @ShareAppMessage="onShareAppMessage(projectDetail.id) ">
							<view class="project-detail-option-text project-detail-option-top">
								<image class="project-detail-option-top" :src="base_url+'/img/wx/gkxcx/p-share.jpg'" mode="heightFix"></image>
							</view>
							<view class="project-detail-option-text">
								<text>分享</text>
							</view>
						</button>
					</view>
					<view class="project-detail-option-sc" @click="commentSub" v-if="isLine">
						<view class="project-detail-option-top">
							<image class="project-detail-option-top" :src="base_url+'/img/wx/gkxcx/p-edit.jpg'" mode="heightFix"></image>
						</view>
						<view class="project-detail-option-text">
							评论
						</view>
					</view>

				</view>
				<view class="project-detail-option-btn" v-if="isLine">
					<view @click="goChat" class="project-detail-option-left-btn">
						在线洽谈
					</view>
				</view>
			</view>

			<!-- 评论输入框 
			<msgInput :inputContentFocus="showInput" ref='msgInputRef'></msgInput>-->
		</luBarTabNav>

	</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import luBarTabNav from "@/components/lu-bar-tab-nav/lu-bar-tab-nav.vue";
	import ProjectItem from '@/components/page-componnet/project-item.vue'
	import commentTpl from '@/components/comment-tpl/comment-tpl.vue'
	import commonDetailTitle from '@/components/common-detail-title/common-detail-title.vue'
	import moment from 'moment';
    import { permissionJudge } from "@/utils/authority.js" //权限信息校验
	import { baseUrl } from '@/utils/index.js';
	export default {
		components: {
			luBarTabNav,
			ProjectItem,
			commentTpl,
			commonDetailTitle
			//msgInput
		},
		data() {
			return {
				base_url:baseUrl,
				constUrl: this.$baseUrl,
				isShowTabbar: false,
				isCollect: false,
				collectInfo: {},
				searchRecommendProjectList: [],
				projectDetail: {},
				isLine:false,
				barFixed: true,
				barHeight: "44",
				barTop: 0,
				iconShow: true,
				barId: "0",
				tabList: [{
					text: "项目",
					navTarget: "#item1",
					iconClass: "icon01",
					iconImage: "",
					selectedIconClass: "",
					selectedIconImage: ""
				}, {
					text: "详情",
					navTarget: "#item2",
					iconClass: "icon02",
					iconImage: "",
					selectedIconClass: "",
					selectedIconImage: ""
				}, {
					text: "评论",
					navTarget: "#item3",
					iconClass: "icon03",
					iconImage: "",
					selectedIconClass: "",
					selectedIconImage: ""
				}, {
					text: "推荐",
					navTarget: "#item4",
					iconClass: "icon04",
					iconImage: "",
					selectedIconClass: "",
					selectedIconImage: ""
				}],
				bottomHeight: '110rpx',
				commentParams: {
					pageNumber: 1,
					projectId: '',
					type: 'project',
					pageSize: 5
				},
				commentData: {
					list: []
				},
				id: ''
			};
		},
		computed: {
			...mapState('userStore', ['hasLogin', 'userInfo']),
			...mapState('commentStore', ['inputFocus', 'showInput']),
		},
		methods: {
			...mapMutations('userStore', ['saveUserInfo']),
			...mapMutations('commentStore', ['inputContentFocusEvent', 'inputContentBlur', 'toggleInput']),
			onShareAppMessage() {
				return {
					title: this.projectDetail.projectName,
					path: '/pages/project-detail/project-detail?scene=' + this.projectDetail.projectId, //页面路径及参数
					imageUrl: this.projectDetail.photos[0], //图片链接，必须是网络连接，后面拼接时间戳防止本地缓存
				}
			},
			formatJoin(item) {
				if (item) {
					return item.join('、')
				} else {
					return ''
				}
			},
			//获取优选推荐的数据
			getRecommendList() {
				let skillArea = this.projectDetail.skillArea ? this.projectDetail.skillArea.join(',') : '';
				let useArea = this.projectDetail.useArea ? this.projectDetail.useArea.join(',') : '';
				let words = this.projectDetail.words ? this.projectDetail.words.join(',') : '';
				
				this.$request.get({
					url: 'recommend/projects',
					data: {
						num: 5,
						skillArea: skillArea,
						useArea: useArea,
						keyWord: words,
						removeId: this.id,
					},
				}).then(res => {
					console.log('推荐数据',res)
					let arr = res;
				    arr.map((item,index)=>{
						arr[index].yourWant = JSON.parse(item.your_want) ;
						arr[index].words = JSON.parse(item.words) ;
						arr[index].photos = JSON.parse(item.photos) ;
					})
					this.searchRecommendProjectList = arr;
				});
			},
			//获取项目详情
			getProjectDetail(id) {
				this.$request.get({
					url: 'projectInfo/queryByIdToWeb.json',
					data: {
						id
					},
				}).then(res => {
					this.projectDetail = res;
					let prjDetail = res.detail;

					let individual = prjDetail.replace(/height: ;width:/, '');
					individual = individual.replace(/height=/, '');
					individual = individual.replace(/width=/, '');
					// this.expertDetail.individual = individual;
					individual = individual.replace(/src=\"/g, 'style="width:100%;object-fit:cover;" src="' + this.constUrl);
					this.projectDetail.detail = individual.replace(/style=\"/g, 'style="width:100%;object-fit:cover;');
                    //获取推荐项目
					this.getRecommendList();
					uni.setNavigationBarTitle({
						title: res.projectName
					});
				});
			},

			goChat() {
				if (!this.userInfo || !this.userInfo.userId) {
					uni.navigateTo({
						url: '/pagesA/login/login'
					});
					return false;
				}
				if (this.projectDetail.agentUserInfoId == this.userInfo.userId) {
					uni.showToast({
						title: '不能咨询自己',
						icon: 'none'
					})
					return
				}
				 let DEFAULT_CHAT_ID = 85;
				 let { talkChildUserId, talkUserId, publishUserId } = this.projectDetail;
			     let talkId =  talkChildUserId ? talkChildUserId : (talkUserId
				                    ? talkUserId
				                   : (publishUserId ? publishUserId : DEFAULT_CHAT_ID));
				console.log(talkChildUserId,talkUserId,publishUserId,talkId)
				uni.navigateTo({
					url: `/pagesA/chat-contactlist/chat?userId=${talkId}&id=${this.projectDetail.projectId}&img=${this.projectDetail.photos[0]}&type=project&name=${this.projectDetail.projectName}`
				})
			},
			//查看是否收藏
			//获取是否收藏信息
			getCollectInfo() {
				console.log(this.hasLogin)
				if (!this.hasLogin) {
					this.isCollect = false;
					return false
				}
				this.$request.get({
					url: 'userCollection/queryOne',
					data: {
						mainId: this.id,
						type: 0
					},
				}).then(res => {
					if (res) {
						this.isCollect = true;
						this.collectInfo = res;
					} else {
						this.isCollect = false
					}
				});
			},
			//收藏取消事件
			collectProject() {
				
				let userInfo = uni.getStorageSync('userInfo');
				if (!this.userInfo || !this.userInfo.userId) {
					uni.navigateTo({
						url: '/pagesA/login/login'
					});
					return false;
				}
				if (JSON.stringify(userInfo) == "{}") {
					return false
				}
				// if(!permissionJudge('user:collection:list')){
				// 	uni.showToast({
				// 		title:'暂无权限',
				// 		icon:'none'
				// 	})
				// 	return false
				// }
				//如果已收藏，取消收藏
				if (this.isCollect) {
					this.$request.get({
						url: 'userCollection/delete',
						data: {
							id: this.collectInfo.id
						},
					}).then(res => {
						this.isCollect = false;
						this.collectInfo = {};
					});
				} else {
					this.$request.get({
						url: 'userCollection/add',
						data: {
							mainId: this.projectDetail.projectId,
							type: 0
						},
					}).then(res => {
						this.isCollect = true;
						this.collectInfo = res;
					});
				}
			},
			//获取评论信息
			getComment() {
				this.commentParams.projectId = this.id
				this.$request.get({
					url: 'LevelOneComment/selectLevelOneComment',
					data: this.commentParams
				}).then(res => {
					for (let k of res.list) {
						k.createTime = this.isToday(k.createTime);

						for (let kk of k.levelTwoComments) {
							kk.createTime = this.isToday(kk.createTime);
						}
					}
					res.list = [...this.commentData.list, ...res.list]
					this.commentData = res
					this.commentParams.pageNumber += 1;
				})
			},
			//评论日期处理
			isToday(time) {
				if (new Date() - new Date(time) < 86400000) {
					return moment(time).format('HH:mm')
				} else {
					return moment(time).format('MM/DD HH:mm')
				}
			},
			//一级评论
			insertLevelOneComment(v) {
				this.$request.post({
					url: 'LevelOneComment/insertLevelOneComment',
					data: {
						linkProjectId: this.id,
						commentContent: v,
						type: 'project'
					}
				}).then(res => {
					res.linkUserAccountHead = this.userInfo.accountHead;
					res.linkUserName = this.userInfo.realName;
					res.vipLevelIcon = this.userInfo.vipLevelIcon;
					res.vipLevel = this.userInfo.vipLevel;
					res.tags.count = 0;
					res.createTime = moment(new Date().getTime()).format('HH:mm');
					this.commentData.list = [...[res], ...this.commentData.list]
				})
			},
			//二级评论
			insertLevelTwoComment(v) {
				console.log(v)
				this.$request.post({
					url: 'LevelTwoComment/insertLevelTwoComment',
					data: {
						linkCommentId: v.data.levelOneCommentId ? v.data.levelOneCommentId : v.data.linkCommentId,
						whoCommentId: v.data.linkUserId,
						linkTwoCommentId: v.data.levelTwoCommentId,
						hisName: v.data.linkUserName ? v.data.linkUserName : v.data.myName,
						commentContent: v.content,
						type: 'project'
					}
				}).then(res => {
					res.myHead = this.userInfo.accountHead;
					res.myName = this.userInfo.realName;
					res.vipLevelIcon = this.userInfo.vipLevelIcon;
					res.vipLevel = this.userInfo.vipLevel;
					res.tags.count = 0;
					res.createTime = moment(new Date().getTime()).format('HH:mm');
					const temp = this.commentData.list.find((item) => item.levelOneCommentId === res.linkCommentId);
					if (!temp.levelTwoComments || temp.levelTwoComments.length === 0) {
						temp.levelTwoComments = [];
					}
					temp.levelTwoComments = [...temp.levelTwoComments, ...[res]];
				})
			},
			//举报
			insertReport(v) {
				this.$request.post({
					url: 'Report/insertReport',
					data: {
						linkCommentId: v.data.levelOneCommentId ? v.data.levelOneCommentId : v.data.levelTwoCommentId,
						rank: v.data.levelOneCommentId ? 1 : 2,
						reportContent: v.content,
						type: 'project',
					}
				}).then(res => {
					uni.showToast({
						title: '举报成功',
					})
					this.$refs.commentTpl.closePuptTip()
				})
			},

			//删除评论
			delectLevelTwoCommentById(v) {
				console.log(v)
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确认删除当前评论吗?',
					success: function(res) {
						if (res.confirm) {
							let temp = {}
							let url = 'LevelOneComment/delectLevelOneCommentByid'
							if (v.levelOneCommentId) {
								temp.levelOneCommentId = v.levelOneCommentId
								url = 'LevelOneComment/delectLevelOneCommentByid'
							} else {
								temp.LevelTwoCommentId = v.levelTwoCommentId
								url = 'LevelTwoComment/delectLevelTwoCommentById'
							}

							that.$request.get({
								url: url,
								data: temp
							}).then(res => {
								let data = ''
								if (v.levelOneCommentId) {
									data = that.commentData.list.findIndex((item) => {
										return item.levelOneCommentId === v.levelOneCommentId
									});
									that.commentData.list.splice(data, 1);
								} else {
									for (let k of that.commentData.list) {
										data = k.levelTwoComments.findIndex((item) => {
											return item.levelTwoCommentId === v.levelTwoCommentId
										});
										k.levelTwoComments.splice(data, 1);
									}

								}
								uni.showToast({
									title: '删除成功',
								})
							})

							that.$refs.commentTpl.closePup()
						} else if (res.cancel) {
							that.$refs.commentTpl.closePup()
						}
					}
				});

			},
			// 点赞
			increaseThumb(v) {
				if (v.tags.flag == 1) {
					this.$request.post({
						url: 'Tags/cancelTag',
						data: {
							tagsId: v.tags.tagsId
						}
					}).then(res => {
						let data = {}
						if (v.levelOneCommentId) {
							data = this.commentData.list.find((item) => item.levelOneCommentId === v.levelOneCommentId);
						} else {

							for (let k of this.commentData.list) {
								for (let kk of k.levelTwoComments) {
									if (kk.levelTwoCommentId == v.levelTwoCommentId) {
										data = kk
									}
								}
							}
						}
						data.tags.count = res
						data.tags.flag = 0
					})
				} else {
					this.$request.post({
						url: 'Tags/increaseThumb',
						data: {
							tagsId: v.tags.tagsId
						}
					}).then(res => {
						let data = {}
						if (v.levelOneCommentId) {
							data = this.commentData.list.find((item) => item.levelOneCommentId === v.levelOneCommentId);
						} else {

							for (let k of this.commentData.list) {
								for (let kk of k.levelTwoComments) {
									if (kk.levelTwoCommentId == v.levelTwoCommentId) {
										data = kk
									}
								}
							}
						}

						// if(!data.tags){

						// }
						data.tags.count = res
						data.tags.flag = 1
					})
				}

			},
			// 评论
			commentSub() {
				// if(!permissionJudge('comment:levelOne:save')){
				// 	uni.showToast({
				// 		title:'暂无权限',
				// 		icon:'none'
				// 	})
				// 	return false
				// }
				this.$refs.commentTpl.openComment(1)
				//this.$refs.msgInputRef.focus();
			},
			loadIsLine(){
				//是否上线
				this.$request.get({
					url:'user/chat'
				}).then(res=>{
					console.log(res,res.indexOf('false') === -1,res.indexOf('true') === -1)
					if(res.indexOf('false') !== -1){
						this.isLine = false;
					}
					if(res.indexOf('true') !== -1){
						this.isLine = true;
					}
				})
			}
		},

		onLoad(option) {
			wx.showShareMenu({
					withShareTicket:true,
					//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
					menus:["shareAppMessage","shareTimeline"]
			})
			this.loadIsLine();
			this.id = option.scene;
			this.getProjectDetail(option.scene);
			this.getComment()
			let that = this
			uni.getSystemInfo({
				success: function(res) {
					console.log(res.model);
					if (res.model.indexOf('iPhone X') != -1 || res.model.indexOf('iPhone 11') != -1) { //XS,XR,XS MAX均可以适配,因为indexOf()会将包含'iPhone X'的字段都查出来
						that.bottomHeight = '185rpx'
					} else {
						that.bottomHeight = '110rpx'
					}
				}
			});
		},
		onShow() {
			this.getCollectInfo();
		},
		onPageScroll: function(e) {
			if (e.scrollTop > 70) {
				this.isShowTabbar = true
			}
			if (e.scrollTop < 70) {
				this.isShowTabbar = false
			}
			this.$refs.barTabNav._selectedTab(e.scrollTop);
		},
		onHide() {
			this.$refs.ProjectItem.resetOpcity()
		},

	}
</script>
<style scoped>
	.page-content {
		position: relative;
		width: 100%;
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		align-items: center;
		background-color: #eee;
		font-size: 14px;
	}

	.banner {
		position: relative;
		width: 100%;
		height: 200px;
	}

	.tabbody {
		position: relative;
		width: 100%;
		/* border-bottom: 3px solid #4CD964; */
	}

	.project-detail-project-img {
		width: 100%;
		background-color: #FFFFFF;
		height: 471upx;
		/* border: 1px solid #007AFF; */
	}

	.project-detail-project-contain {
		background-color: #FFFFFF;
		padding: 30upx 30upx;
	}

	.project-detail-project-title {
		font-size: 32upx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: rgba(34, 34, 34, 1);
	}

	.project-detail-project-want {
		margin-top: 18upx;
		font-size: 26upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(222, 90, 2, 1);
		display: flex;
	}

	.two-line {
		overflow: hidden;
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 2;
		/** 显示的行数 **/
	}

	.project-detail-project-wantdesc {
		color: #333;
		margin-top: 26upx;
		border-radius: 12upx;
		white-space: pre-wrap;
		word-break: break-all;
		/* height: 105upx; */
		padding: 14upx;
		background-color: #FBFBFB;
		font-size: 26upx;
		/* line-height: 1.4; */
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
	}
	
	.project-detail-project-wantdesc-title{
		font-size: 26upx;
		font-weight: 500;
		margin-top: 15upx;
		margin-bottom: 15upx;
	}

	.project-detail-project-condetail {
		display: flex;
		flex-wrap: wrap;
		/* margin-top: 36upx; */
	}

	.project-detail-project-condetail-item-over {
		width: 100%;
		padding-right: 10upx;
		display: flex;
		align-items: flex-start;
		color: #A9A9A9;
	}

	.project-detail-project-condetail-item-over .letter-spacing {
		letter-spacing: 10rpx
	}

	.project-detail-project-condetail-item {
		width: 50%;
		padding-right: 10upx;
		margin-bottom: 10upx;
	}

	.one-line {
		/* text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap; */
	}

	.project-detail-project-condetail-item-title {
		font-size: 26upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #A9A9A9;
		width: 165upx;
		text-align: right;
	}

	.project-detail-project-condetail-item-title-mon {
		font-size: 26upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #D50002;
	}

	.project-detail-project-condetail-item-over .project-detail-project-condetail-item-title-con {
		display: inline-block;
		font-size: 26upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		width: 545upx;
	}

	.project-detail-project-condetail-belong {
		background: rgba(255, 255, 255, 1);
		padding: 22upx 30upx;
	}

	.project-detail-project-condetail-belong-title {
		font-size: 30upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
	}

	.project-detail-project-condetail-belong-com {
		margin-top: 15upx;
		font-size: 26upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
	}

	.project-detail-project-condetail-belong-loc {
		font-size: 26upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
	}

	.project-detail-detail-contain {
		padding: 30upx;
		background-color: #FFFFFF;
	}

	.project-detail-detail-contain-title {
		font-size: 30upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
	}

	.project-detail-detail-contain-detail {
		/* margin-top: 42upx; */
	}

	.project-detail-comment {
		width: 100%;
		background-color: #FFFFFF;
		padding-bottom: 46upx;
	}

	.project-detail-comment-seen-more {
		margin: 0upx 30upx;
		text-align: center;
		line-height: 88upx;
		height: 88upx;
		background: rgba(248, 248, 248, 1);
		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(42, 125, 250, 1);
	}

	.right-margin43 {
		margin-right: 43upx;
	}

	.left-margin43 {
		margin-left: 43upx;
	}

	.project-detail-recommend {
		background-color: #FFFFFF;
	}

	.project-detail-recommend-head {
		display: flex;
		align-items: center;
		background-color: #F5F5F5;
		justify-content: center;
		height: 114upx;
	}

	.project-detail-recommend-head image {
		height: 50upx;
	}

	.project-detail-recommend-head-line {
		width: 239upx;
		height: 1upx;
		border-bottom: 1px solid #EBEBEB;
	}

	.project-detail-option {
		/* padding-top: 187upx; */
		box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, 0.05);
		background-color: #FFFFFF;
		/* height: 110upx; */
		position: fixed;
		display: flex;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 0 20upx;
	}

	.project-detail-option-contain {
		flex: 1;
		margin-right: 20upx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 110upx;
	}

	.project-detail-option-sc {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		/* padding: 10upx ; */
		width: 88upx;
		height: 82upx;

	}

	.project-detail-option-sc button {
		border: none;
		background-color: #FFFFFF;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		padding: 0;
		width: 88upx;
	}

	.project-detail-option-sc button::after {
		border: none;
	}

	.project-detail-option-top {
		height: 36upx;
		width: 36upx;
		/* border: 1px solid #007AFF; */
	}

	.project-detail-option-text {
		font-size: 20upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #5F5F5F;
		line-height: normal;

	}

	.project-detail-option-btn {
		width: 444upx;
		flex: 1;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		height: 110upx;
	}

	.project-detail-option-left-btn {
		width: 386upx;
		height: 82upx;
		background: linear-gradient(90deg, rgba(114, 170, 255, 1) 0%, rgba(42, 125, 250, 1) 100%);
		border-radius: 12upx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 32upx;
	}

	.project-detail-option-right-btn {
		width: 50%;
		background: rgba(42, 125, 250, 1);
		border-radius: 0upx 100upx 100upx 0upx;
		line-height: 80upx;
		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		text-align: center;
	}

	.project-detail-recommend-head-title {
		font-size: 32upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
	}

	.self-divider {
		width: 100%;
		height: 16upx;
		background: rgba(245, 246, 249, 1);
	}

	.marginb10 {
		margin-bottom: 10upx;
	}

	.project-detail-option-text button {
		font-size: inherit;
		display: inline;
		padding: unset;
		line-height: inherit;
		background-color: #FFFFFF;
		color: #5F5F5F;
	}

	/* .project-detail-option-text button image{
		position: absolute;
		top: 6upx;
		left: 0;
	} */

	.project-detail-option-text button::after {
		border: none;
	}

	.project-appeal {
		margin: 14upx 0;
		padding: 40upx;
		background-color: #FFFFFF;
		position: relative;
	}

	.project-appeal .project-appeal-right-sign {
		position: absolute;
		width: 104upx;
		height: 108upx;
		right: 0;
		top: 0;
	}

	.project-appeal .appeal-title {
		font-size: 30upx;
		font-weight: 500;
		color: #DE5A02;
		line-height: 42upx;
	}

	.project-appeal .appeal-title image {
		width: 26upx;
		height: 26upx;
		display: inline-block;
		vertical-align: middle;
		margin-bottom: 6upx;
		margin-right: 16upx;
	}

	.project-appeal .appeal-desc {
		font-size: 26upx;
		font-weight: 400;
		color: #6b6b6b;
		line-height: 42upx;
		margin-top: 30upx;
		word-break: break-all;
	}

	.project-detail-project-words {
		word-break: break-all;
		word-wrap: break-word;
		white-space: pre-wrap;
		margin-top: 28upx;
	}

	.project-detail-project-words view {
		display: inline-block;
		color: #2A7DFA;
		font-size: 26upx;
		background: #F2F7FF;
		padding: 3upx 11upx;
		margin-right: 12upx;
		margin-bottom: 12upx;
		white-space: nowrap;
	}
</style>
